<!DOCTYPE html>
<html lang="zh-cmn">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<title>公共组件 - TomUI</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../public/style/css/tom.css" />
  <style>
    .widget-stage {
      padding: 50px;
    }
    .widget-stage-title {
      margin-bottom: 15px;
      font-size: 36px;
    }
    .widget-stage-desc {
      margin-bottom: 50px;
      color: gray;
      font-size: 15px;
    }
    .widget-item {
      margin-bottom: 40px;
      padding-bottom: 22px;
      border-bottom: 1px solid #E4E6E9;
    }
    .widget-item-title {
      margin-bottom: 16px;
      font-size: 22px;
    }
    .widget-item-cnt {
      *zoom: 1;
    }
    .widget-item-cnt:after {
      clear: both;
      content: ".";
      display: block;
      line-height: 0;
      font-size: 0;
      visibility: hidden;
      overflow: hidden;
    }
    .widget-item .qui-dialog,
    .widget-item .qui-dropdownMenu {
      position: relative;
      float: left;
      margin: 10px 10px 10px 0;
      top: 0 !important;
      left: 0 !important;
    }
    .widget-item .tm-inputText {
      margin-bottom: 20px;
    }
    .widget-item .qui-dialog {
      z-index: 10;
    }
  </style>
</head>
<body>


<div class="widget-stage">

    <div class="widget-stage-title">TomUI 项目通用组件</div>

    <div class="widget-stage-desc">项目中应当抽取公共的部分以及较为复杂的部分作为组件，方便复用。其中按钮，对话框，遮罩层，下拉菜单，选项卡和文本输入6个组件因为每个项目中都基本会使用到，因此已经由框架预先实现，可以通过修改 UI-dev/project/-var.scss 以及 UI-dev/project/widget 中对应的文件来修改组件的样式，已达到项目的设计要求。</div>

    <div class="widget-item">
        <div class="widget-item-title">基础按钮</div>
        <div class="widget-item-cnt">
            <a class="tm-btn" href="javascript:;">Default</a>
            <a class="tm-btn tm-btn-ghost" href="javascript:;">Ghost</a>
            <a class="tm-btn tm-btn-dashed" href="javascript:;">Dashed</a>
            <a class="tm-btn tm-btn-text" href="javascript:;">Text</a>
            <button class="tm-btn tm-btn-circle" type="button">常规按钮</button>
        </div>
    </div>
    <div class="widget-item">
        <div class="widget-item-title">禁止状态按钮</div>
        <div class="widget-item-cnt">
            <a href="javascript:;" class="tm-btn disabled">禁止按钮</a>
            <button type="button" class="tm-btn" disabled="disabled">常规按钮</button>
            <input type="button" class="tm-btn" value="常规按钮" disabled="disabled" />
            <a href="javascript:;" class="tm-btn tm-btn-primary" disabled="disabled">禁止按钮</a>
            <button type="button" class="tm-btn tm-btn-primary" disabled="disabled">常规按钮</button>
            <input type="button" class="tm-btn tm-btn-primary" value="常规按钮" disabled="disabled" />
        </div>
    </div>
    <div class="widget-item">
        <div class="widget-item-title">有颜色倾向按钮</div>
        <div class="widget-item-cnt">
            <div>
                <a class="tm-btn tm-btn-ghost tm-btn-primary" href="javascript:;">主要按钮</a>
                <a class="tm-btn tm-btn-ghost tm-btn-info" href="javascript:;">信息按钮</a>
                <a class="tm-btn tm-btn-ghost tm-btn-success" href="javascript:;">成功按钮</a>
                <a class="tm-btn tm-btn-ghost tm-btn-warning" href="javascript:;">警告按钮</a>
                <a class="tm-btn tm-btn-ghost tm-btn-error" href="javascript:;">错误按钮</a>
                <a class="tm-btn tm-btn-ghost tm-btn-danger" href="javascript:;">危险按钮</a>
            </div>
            <br />
            <div>
                <a class="tm-btn tm-btn-dashed tm-btn-primary" href="javascript:;">主要按钮</a>
                <a class="tm-btn tm-btn-dashed tm-btn-info" href="javascript:;">信息按钮</a>
                <a class="tm-btn tm-btn-dashed tm-btn-success" href="javascript:;">成功按钮</a>
                <a class="tm-btn tm-btn-dashed tm-btn-warning" href="javascript:;">警告按钮</a>
                <a class="tm-btn tm-btn-dashed tm-btn-error" href="javascript:;">错误按钮</a>
                <a class="tm-btn tm-btn-dashed tm-btn-danger" href="javascript:;">危险按钮</a>
            </div>
            <br />
            <div>
                <a class="tm-btn tm-btn-primary" href="javascript:;">主要按钮</a>
                <a class="tm-btn tm-btn-info" href="javascript:;">信息按钮</a>
                <a class="tm-btn tm-btn-success" href="javascript:;">成功按钮</a>
                <a class="tm-btn tm-btn-warning" href="javascript:;">警告按钮</a>
                <a class="tm-btn tm-btn-error" href="javascript:;">错误按钮</a>
                <a class="tm-btn tm-btn-danger" href="javascript:;">危险按钮</a>
            </div>
        </div>
    </div>
    <div class="widget-item">
        <div class="widget-item-title">不同尺寸按钮</div>
        <div class="widget-item-cnt">
            <button type="button" class="tm-btn-primary tm-btn tm-btn-large">大型按钮</button>
            <button type="button" class="tm-btn-primary tm-btn">正常按钮</button>
            <button type="button" class="tm-btn-primary tm-btn tm-btn-small">小型按钮</button>
            <button type="button" class="tm-btn-primary tm-btn tm-btn-mini">迷你按钮</button>
        </div>
        <br />
        <div class="widget-item-cnt">
            <button type="button" class="tm-btn-primary tm-btn-circle tm-btn tm-btn-large">大型按钮</button>
            <button type="button" class="tm-btn-primary tm-btn-circle tm-btn">正常按钮</button>
            <button type="button" class="tm-btn-primary tm-btn-circle tm-btn tm-btn-small">小型按钮</button>
            <button type="button" class="tm-btn-primary tm-btn-circle tm-btn tm-btn-mini">迷你按钮</button>
        </div>
    </div>
    <div class="widget-item">
        <div class="widget-item-title">图标按钮</div>
        <div class="widget-item-cnt">
            <button type="button" class="tm-btn-primary tm-btn">
                <i class="tm-icon tm-checkmark-round"></i>
                <span>正常按钮</span>
            </button>
            <button type="button" class="tm-btn tm-btn-primary tm-btn-loading">
                <i class="tm-icon tm-load-c tm-load-loop"></i>
                &nbsp;Loading...
            </button>
            <button type="button" class="tm-btn-primary tm-btn tm-btn-large">
                <i class="tm-icon tm-checkmark-round"></i>
                <span>正常按钮</span>
            </button>
        </div>
    </div>
    <div class="widget-item">
        <div class="widget-item-title">长按钮</div>
        <div class="widget-item-cnt">
            <button type="button" class="tm-btn-primary tm-btn tm-btn-large tm-btn-long">大型按钮</button>
            <br />
            <br />
            <button type="button" class="tm-btn-primary tm-btn tm-btn-long">正常按钮</button>
            <br />
            <br />
            <button type="button" class="tm-btn-primary tm-btn tm-btn-small tm-btn-danger tm-btn-long">正常按钮</button>
        </div>
    </div>
    <div class="widget-item">
        <div class="widget-item-title">长按钮</div>
        <div class="widget-item-cnt">
            <button type="button" class="tm-btn-primary tm-btn tm-btn-large tm-btn-long">大型按钮</button>
            <br />
            <br />
            <button type="button" class="tm-btn-primary tm-btn tm-btn-long">正常按钮</button>
            <br />
            <br />
            <button type="button" class="tm-btn-primary tm-btn tm-btn-small tm-btn-danger tm-btn-long">正常按钮</button>
        </div>
    </div>
    <div class="widget-item">
        <div class="widget-item-title">对话框 tm-dialog</div>
        <div class="widget-item-cnt">

            <div class="qui-dialog tm-dialog">
                <a class="qui-dialog-close tm-dialog-close" href="javascript:;">×</a>
                <div class="qui-dialog-head tm-dialog-head">
                    <div class="qui-dialog-title tm-dialog-title">对话框标题</div>
                </div>
                <div class="qui-dialog-body tm-dialog-body">
                    这里是对话框的主体内容。<br />
                    通常一个对话框由头部、主体内容和底部栏三部分组成。
                </div>
                <div class="qui-dialog-foot tm-dialog-foot">
                    <a class="qui-btn tm-btn" href="javascript:;">确认</a><a class="qui-btn tm-btn tm-btn-Ghost" href="javascript:;">取消</a>
                </div>
            </div>

        </div>
    </div>

    <div class="widget-item">
        <div class="widget-item-title">遮罩层 tm-mask</div>
        <div class="widget-item-cnt">
            <a id="qui-showMask" href="javascript:;">查看效果</a>
        </div>
    </div>

    <!-- 遮罩层效果演示 -->
    <div id="qui-maskWrap" style="display: none;">
        <div class="qui-mask tm-mask"></div>
        <div class="qui-dialog tm-dialog widget-dialogInMask">
            <div class="qui-dialog-head tm-dialog-head">
                <div class="qui-dialog-title tm-dialog-title">对话框标题</div>
                <a class="qui-dialog-close tm-dialog-close tm-icon tm-icon-CloseDialog" href="javascript:;">×</a>
            </div>
            <div class="qui-dialog-body tm-dialog-body">点击任意处关闭</div>
            <div class="qui-dialog-foot tm-dialog-foot">
                <a class="qui-btn tm-btn tm-btn-Blue" href="javascript:;">确认</a>
                <a class="qui-btn tm-btn" href="javascript:;">取消</a>
            </div>
        </div>
    </div>

    <div class="widget-item">
        <div class="widget-item-title">下拉菜单 tm-dropdownmenu</div>
        <div class="widget-item-cnt">

            <div class="qui-dropdownMenu tm-dropdownMenu">
                <ul>
                    <li class="qui-dropdownMenu-item tm-dropdownMenu-item">
                        <a href="javascript:;" class="qui-dropdownMenu-itemLink tm-dropdownMenu-itemLink">菜单选项一</a>
                    </li>
                    <li class="qui-dropdownMenu-item tm-dropdownMenu-item">
                        <a href="javascript:;" class="qui-dropdownMenu-itemLink tm-dropdownMenu-itemLink">菜单选项二</a>
                    </li>
                    <li class="qui-dropdownMenu-item tm-dropdownMenu-item">
                        <a href="javascript:;" class="qui-dropdownMenu-itemLink tm-dropdownMenu-itemLink">菜单选项三</a>
                    </li>
                    <li class="qui-dropdownMenu-item tm-dropdownMenu-item">
                        <a href="javascript:;" class="qui-dropdownMenu-itemLink tm-dropdownMenu-itemLink">菜单选项四</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <div class="widget-item">
        <div class="widget-item-title">选项卡 tm-tab</div>
        <div class="widget-item-cnt">

            <div class="qui-tab tm-tab">
                <div class="qui-tab-title tm-tab-title">
                    <ul class="qui-tabNav tm-tabNav">
                        <li class="qui-tabNav-item tm-tabNav-item tm-tabNav-item-Curr">
                            <a href="javascript:;" class="qui-tabNav-itemLink tm-tabNav-itemLink">选项卡一</a>
                        </li>
                        <li class="qui-tabNav-item tm-tabNav-item">
                            <a href="javascript:;" class="qui-tabNav-itemLink tm-tabNav-itemLink">选项卡二</a>
                        </li>
                        <li class="qui-tabNav-item tm-tabNav-item">
                            <a href="javascript:;" class="qui-tabNav-itemLink tm-tabNav-itemLink">选项卡三</a>
                        </li>
                    </ul>
                </div>
                <div class="qui-tab-cnt tm-tab-cnt">这里是选项卡的内容</div>
            </div>

        </div>
    </div>

    <div class="widget-item">
        <div class="widget-item-title">文本输入 tm-inputText/tm-textarea</div>
        <div class="widget-item-cnt">
            <input type="text" class="qui-inputText tm-inputText" placeholder="普通文本框" />
            <textarea class="qui-textarea tm-textarea" placeholder="长文本框"></textarea>
        </div>
    </div>

</div>

<script>
    // 公共组件遮罩层效果展示
    var showMask = document.getElementById('qui-showMask'),
        maskWrap = document.getElementById('qui-maskWrap');
    if(showMask && maskWrap) {
        showMask.onclick = function(){
            maskWrap.style.display = 'block';
        }
        maskWrap.onclick = function(){
            maskWrap.style.display = 'none';
        }
    }
</script>

</body>
</html>

